<template>
  <div>
    <el-table :data="jobs" :height="tableHeight" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-table :data="props.row.group" :stripe="true" size="small" border>
            <el-table-column label="任务" prop="title" width="120"></el-table-column>
            <el-table-column label="说明" prop="description"></el-table-column>
            <el-table-column label="类型" prop="type" width="80"></el-table-column>
            <el-table-column label="参数" prop="args" width="80">
              <template slot-scope="scope">
                <i class="el-icon-document my-icon-btn" title="详细" @click="handleDetail(scope.$index, scope.row)"></i>
              </template>
            </el-table-column>
            <el-table-column label="开始时间" width="160">
              <template slot-scope="scope">
                {{ scope.row.beginTime ? new Date(scope.row.beginTime).format('yyyy-MM-dd HH:mm:ss') : '' }}
              </template>
            </el-table-column>
            <el-table-column label="结束时间" width="160">
              <template slot-scope="scope">
                {{ scope.row.endTime ? new Date(scope.row.endTime).format('yyyy-MM-dd HH:mm:ss') : '' }}
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>


      <el-table-column label="任务组" prop="title" width="160"></el-table-column>
      <el-table-column label="说明" prop="description" min-width="400"></el-table-column>
      <el-table-column label="开始时间" width="160">
        <template slot-scope="scope">
          {{ new Date(scope.row.beginTime).format('yyyy-MM-dd HH:mm:ss') }}
        </template>
      </el-table-column>
      <el-table-column label="周期" prop="cycle" width="120"></el-table-column>
      <el-table-column label="子任务" width="120">
        <template slot-scope="scope">
          {{ scope.row.group ? scope.row.group.length : 0 }}
        </template>
      </el-table-column>
      <el-table-column label="最后运行" width="160">
        <template slot-scope="scope">
          {{ scope.row.lastRunTime ? new Date(scope.row.lastRunTime).format('yyyy-MM-dd HH:mm:ss') : '' }}
        </template>
      </el-table-column>
      <el-table-column label="启用" width="80">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.status" active-value="1" inactive-value="0" @change="changeStatus(scope.row.status, scope.row)"></el-switch>
          <!-- {{ scope.row.status === '1' ? '启用' : '禁用' }} -->
        </template>
      </el-table-column>
      <el-table-column width="120">
        <template slot-scope="scope">
          <i class="el-icon-caret-left my-icon-btn" title="立即运行" @click="handleRun(scope.$index, scope.row)"></i>
          <i class="el-icon-edit my-icon-btn" title="修改" @click="handleEdit(scope.$index, scope.row)"></i>
          <i class="el-icon-delete my-icon-btn" title="删除" @click="handleDelete(scope.$index, scope.row)"></i>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="shellTitle" :visible.sync="shellVisible" width="70%">
      <log-tabs :height="areaHeight" :tabs="tabs" :active.sync="active"></log-tabs>
    </el-dialog>

    <el-dialog title="修改任务组" :fullscreen="true" :visible.sync="editVisible">
      <edit :winP="winP" :visible.sync="editVisible" :job="row" v-on:edit="() => { Object.assign(this.jobs[chooseRowIndex], this.row) }"></edit>
    </el-dialog>
  </div>
</template>

<script>
  import logTabs from './log-tabs'
  import edit from './edit'

  export default {
    props: ['winP', 'jobs'],
    data() {
      return {
        shellVisible: false,
        editVisible: false,
        active: '',
        shellTitle: '',
        tabs: [],
        chooseRowIndex: 0,
        row: {
          title: '',
          beginTime: new Date(),
          description: '',
          cycle: 24 * 3600000,
          group: [],
        }
      }
    },
    computed: {
    	tableHeight () {
    		return this.winP.height - 96
    	},
      areaHeight () {
        return Math.floor((this.winP.height - 335) / 21)
      }
    },
    methods: {
      async handleRun (index, row) {
        await this.$confirm(`立即执行任务 [${row.title}] ?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })

        await this.$api.call({
          service: 'run',
          body: {
            _id: row._id
          }
        })
        row.lastRunTime = new Date().format('yyyy-MM-dd HH:mm:ss') 
        // this.$set(row, 'lastRunTime', new Date())
        this.$message.success(`任务 ${row.title} 已开始运行，请转到 livy控制台 查看！`)
      },
      async handleDelete (index, row) {
        await this.$confirm(`删除定时任务 [${row.title}] ?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await this.$api.call({
          service: 'delete',
          body: {
            _id: row._id
          }
        })
        this.$message.success(`任务 [${row.title}] 删除成功！`)
        this.$emit('flush')
      },
      async changeStatus(status, row) {
        await this.$api.call({
          service: 'status',
          body: {
            _id: row._id,
            status
          }
        })
        this.$message.success(`任务 ${row.title} ${status === '1' ? '已启用' : '已禁用'}`)
      },
      handleDetail (index, row) {
        if (row.type === 'shell') {
          this.$set(this, 'tabs', {
            file: row.file, 
            options: (row.options ? JSON.stringify(row.options, null, 2) : '')
          })
          this.shellTitle = row.title
          this.active = 'file'
        }else{
          this.$set(this, 'tabs', {
            args: (row.args ? JSON.stringify(row.args, null, 2) : '')
          })
          this.active = 'args'
        }
        this.shellVisible = true
      },
      handleEdit (index, row) {
        this.editVisible = true
        this.chooseRowIndex = index
        row.beginTime = new Date(row.beginTime)
        Object.assign(this.row, row)
      }
    },
    components: {
      logTabs, edit
    }
  }
</script>